<template>
  <!-- 点到点任务最大盒子 -->
  <div class="mydot">
    <!-- 选择起点结构 -->
    <div class="downList">
      <!-- 下拉菜单 -->
      <div class="origin">
        <van-dropdown-menu :overlay="false">
          <van-icon name="location-o" color="#1ed100" size="32"
            ><span>{{
              value1 === "" ? "选择起点" : newonetext
            }}</span></van-icon
          >
          <van-dropdown-item
            @change="oneadd"
            v-model="value1"
            :options="location"
          />
        </van-dropdown-menu>
      </div>
      <div class="outcome">
        <van-dropdown-menu :overlay="false">
          <van-icon name="location-o" color="#ff6317" size="32"
            ><span>{{
              value2 === "" ? "选择终点" : newtwotext
            }}</span></van-icon
          >
          <van-dropdown-item
            @change="twoadd"
            v-model="value2"
            :options="location"
          />
        </van-dropdown-menu>
      </div>
      <van-checkbox id="ads" v-model="checked">返回待命点</van-checkbox>
    </div>
    <!-- 执行按钮区域 -->
    <div class="button">
      <van-button :loading="loading" @click="add">执行</van-button>
    </div>
  </div>
</template>

<script>
//导入下发任务接口请求
import { issueApi } from "@/api/assignment";
//导入yaml格式进行数据转换
import yaml from "js-yaml";
// 导入mock模拟数据
import { paramsList } from "@/api/mock";
//导入获取库位点的接口请求
import { gainApi } from "@/api/record";
export default {
  name: "Son",
  // 接收父组件中传入的值
  props: ["spotshow", "newItem", "newIndex","locationd",'clickitem'],
  data() {
    return {
      checked:false,
      button: true, //控制提交按钮显示和隐藏
      checked: false, //是否返回待命点开关
      newtwotext: "", //用来保存终点数据id
      newonetext: "", //用来保存起点数据id
      onetext: "选择起点", //默认给起点下拉框的标题
      twotext: "选择终点", //默认给终点下拉宽的标题
      value1: "", //选中的下标起点状态
      value2: "", //选中的下标终点状态
      paramsList: paramsList, //使用mock模拟数据
      iscarryout: false, //控制执行区域的显示和隐藏
      location: [], //用来保存库位列表信息
      cartoon: false, //动画加载效果
      one: 0, //作为选中后的数值
      loading: false, //控制加载状态的显示和隐藏
    };
  },
  watch: {
    clickitem(val) {
      console.log(val)
      if(val.type==3 || val.type==0 ) return
      if(this.value1==''){
        this.value1 = val.id
        this.newonetext = val.id
      }else{
        this.value2 = val.id
        this.newtwotext = val.id
      }
    }
  },
  methods: {
    add() {
      //判断没有选择起点
      if (this.newonetext == "") {
        this.$toast.fail("请选择起点列");
        return;
        //判断没有选择终点
      } else if (this.newtwotext == "") {
        this.$toast.fail("请选择终点列");
        return;
        //判断终点起点相同
      } else if (this.newonetext == this.newtwotext) {
        this.$toast.fail("终点与起点不能相同");
        return;
      }
      let datas = 0;
      if(this.checked==false){
        datas = 0;
      }else{
        datas = 1;
      }
      this.loading = true;
      setTimeout(async () => {
        try {
          let res = await issueApi({
            back_standby_point: datas, //是否返回待命点
            task_type: this.newIndex, //任务类型为父组件传过来的下标
            start_point_id: this.newonetext, //起点id位置
            end_point_id: this.newtwotext, //终点id位置
            start_column_id: 0, //列到列起点id
            end_column_id: 0, //列到列终点id
          });
          //提示用户执行成功
          this.$toast.success("执行成功");
        } catch {
          //提示用户执行失败
          this.$toast.fail("执行失败");
        }
        //关闭加载动画
        this.loading = false;
         //清空数据
        this.value1=''
        // 清空数据
        this.value2=''
      }, 1500);
    },
    //-----------------------------------------开关值改变的状态
    // onswitch() {
    //   this.one = Number(this.checked); //改为数值形式
    // },
    //---------------------------------------点击修改起点数据
    oneadd(e) {
      // 使用方法进行筛选
      let res = this.location.filter((item) => {
        return item.value == e; //把点击的哪一项的下标判断返回数据
      });
      //把第0项数据的text赋值给定义的变量
      this.newonetext = res[0].text;
    },
    //------------------------------------- 点击修改终点数据
    twoadd(e) {
      // 使用方法进行筛选
      let res = this.location.filter((item) => {
        return item.value == e; //把点击的哪一项的下标判断返回数据
      });
      //把第0项数据的text赋值给定义的变量
      this.newtwotext = res[0].text;
    },
    //--------------------------------------------获取库位点数据
    async getgino() {
      // 发送请求
      // let res = await gainApi();
      // //把数据转换成yaml格式
      // let newres = yaml.load(res.data);
      let newres = this.locationd;
      let Arr = newres.filter((item) => {
        return item.type != 0; //判断数组中是否有点位瞒住2
      });
      let Arr2 = Arr.filter((item) => {
        return item.type != 3; //判断数组中是否有点位瞒住2
      });
      //使用map进行映射修改id的键为text
      this.location = Arr2.map((item, index) => {
        return {
          value: index, //把下标改成value键名
          text: item.id, //把id的键名改成text
        };
      });
      console.log(this.location, "点到点数据");
      // 进行下拉菜单的赋值
      this.onetext = this.location.text;
      // 进行下拉菜单的赋值
      this.twotext = this.location.text;
    },
  },
  created() {
    this.getgino(); //打开页面发发送请求获取数据
  },
};
</script>

<style lang="less" scoped>
.mydot {
  display: flex;
  width: 100%;
  ::v-deep .van-dropdown-menu__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 200px !important;
    cursor: pointer;
    background-color: skyblue !important;
    height: 20px !important;
  }
  .van-dropdown-menu {
    position: relative;
    // padding: 0 10px;
    margin-bottom: 20px;
    width: 240px !important;
    .van-icon {
      position: absolute;
      top: 5px;
      left: 20px;
      span {
        width: 80px;
        position: absolute;
        top: -8px;
        line-height: 50px;
        font-size: 16px;
        color: black;
        margin-left: 10px;
      }
    }
  }
  ::v-deep .van-dropdown-menu__bar {
    position: relative;
    display: flex;
    height: 40px;
    background-color: skyblue;
    box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
  }
  ::v-deep .van-dropdown-menu__title::after {
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top: 5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
  .button {
    margin-left: 5px;
    .van-button {
      border: none;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      width: 65px;
      height: 100px;
      background-color: #3ab9bc;
    }
  }

  ::v-deep .van-popup {
    width: 240px;
    height: 500px;
    margin-left: 704px;
    border: none !important;
    .van-button {
      position: fixed;
      left: 25%;
      width: 400px;
      height: 50px;
      border-radius: 20px;
      font-size: 22px;
    }
    .van-dropdown-item__content {
      position: absolute;
      max-height: 100%;
    }
  }
}#ads{
  /deep/ .van-checkbox__label{
    font-size: 22px!important;
    color: #fff!important;
  } 
  
}
</style>
